<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">		
<title>考勤管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome.css">.
<link rel="stylesheet" href="css/sky-mega-menu.css">
	<link rel="stylesheet" href="css/cal_style.css"><!--日历样式-->

	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/table.css">
	<link rel="stylesheet" href="css/cal.css">
</head>
<body class="bg-blue">
<div class="body">
	<!-- mega menu -->
	<ul class="sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-icons">
		<!-- about -->
		<li>
			<a href="#"><i class="fa fa-lemon-o"></i>考勤管理系统</a>
		</li>

		<li class="right">
			<a href="/daka"><i class="fa fa-tags"></i>今日打卡</a>

		</li>
		<!-- contacts -->
		<li class="right">
			<a href="#_"><i class="fa fa-phone"></i>事项管理</a>
			<div class="grid-container3">
				<ul>
					<li><a href="/leave"><i class="fa fa-briefcase"></i>请假</a></li>
					<li><a href="/out"><i class="fa fa-briefcase"></i>外出</a></li>
					<li><a href="/comleave"><i class="fa fa-briefcase"></i>调休</a></li>
				</ul>
			</div>
		</li>
		<!--/ contacts -->

		<!-- drop me a line -->
		<li aria-haspopup="true" class="right">
			<a href="#_"><i class="fa fa-tasks"></i>员工信息</a>
			<div class="grid-container3">
				<ul>
					<li><a href="/info"><i class="fa fa-user"></i>个人信息</a></li>
					<li><a href="/cal"><i class="fa fa-print"></i>打卡记录</a></li>
					<li><a href="/logout"><i class="fa fa-chevron-circle-right"></i>注销</a></li>
				</ul>
			</div>

	</ul>
	<!--/ mega menu -->

</div>
<br><br><br><br><br>

<div style="float: left;"><div class="main-container" >

	<div class="calendar-head">
		<h4 class="current-weekday"><span th:text="${day}"></span>号 星期<span th:text="${dayInWeek}"></span>

		</h4>
		<h4 class="month-year"><span th:text="${year}"></span>年 <span th:text="${month}"></span>月</h4>
	</div>

	<div class="calendar-body">
		<ul class="weekdays">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
			<li>日</li>
		</ul>

		<ul class="days">

			<span th:each="day:${daysTable}">
				<li th:if="${day eq 0}" onlick="click(this);"></li>

				<li >
					<button onclick="click_at(this)" th:if="${day gt 0}" th:text="${day}" class="btnTransparent">

					</button></li>

			</span>

			<!--<li class="previous-month">27</li>-->
			<!--<li class="previous-month">28</li>-->
			<!--<li class="previous-month">29</li>-->
			<!--<li class="previous-month">30</li>-->
			<!--<li>1</li>-->
			<!--<li>2</li>-->
			<!--<li>3</li>-->
			<!--<li>4</li>-->
			<!--<li>5</li>-->
			<!--<li>6</li>-->
			<!--<li>7</li>-->
			<!--<li>8</li>-->
			<!--<li>9</li>-->
			<!--<li>10</li>-->
			<!--<li>11</li>-->
			<!--<li> <span class="date-with-event">12</span><span class="event-count">3</span></li>-->
			<!--<li>13</li>-->
			<!--<li>14</li>-->
			<!--<li>15</li>-->
			<!--<li>16</li>-->
			<!--<li>17</li>-->
			<!--<li><span class="active">18</span></li>-->
			<!--<li>19</li>-->
			<!--<li>20</li>-->
			<!--<li>21</li>-->
			<!--<li>22</li>-->
			<!--<li>23</li>-->
			<!--<li>24</li>-->
			<!--<li>25</li>-->
			<!--<li>26</li>-->
			<!--<li>27</li>-->
			<!--<li> <span class="date-with-event">28</span><span class="event-count">5</span></li>-->
			<!--<li>29</li>-->
			<!--<li>30</li>-->
			<!--<li>31</li>-->
		</ul>
	</div>


</div></div>
<div style="float: right; left: 50px;"><table class="table table-hover tab800 tabback">
	<!-- On rows -->
	<thead >
	<th >请假号</th>
	<th >上班时间</th>
	<th >下班时间</th>
	<th >是否缺勤</th>
	</thead>
	<tbody>

	<tr id="content">
		<td ></td>
		<td ></td>
		<td ></td>
		<td ></td>

	</tr>



	</tbody>

</table></div>

</body>
<script src="/js/jquery.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script  src="js/cal.js"></script>
</html>